home *** CD-ROM | disk | FTP | other *** search
/ Enter 2002 November / EnterCD 11_2002.iso / Internet / Amaya 6.4 / Windows NT.exe / _SETUP.1 / creating_clientside_image_maps.html < prev    next >
Encoding:
Extensible Markup Language  |  2002-09-09  |  5.9 KB  |  134 lines
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.   <meta name="GENERATOR" content="amaya 6.2, see http://www.w3.org/Amaya/" />
  7.   <title>Creating client-side image maps</title>
  8.   <style type="text/css">
  9.   </style>
  10.   <link href="../style.css" rel="stylesheet" type="text/css" />
  11. </head>
  12.  
  13. <body xml:lang="en" lang="en">
  14.  
  15. <table border="0" summary="toc">
  16.   <tbody>
  17.     <tr>
  18.       <td><img alt="W3C" src="../../images/w3c_home" /> <img alt="Amaya"
  19.         src="../../images/amaya.gif" /></td>
  20.       <td><p><a href="adding_an_image.html" accesskey="p"><img alt="previous"
  21.         src="../../images/left.gif" /></a> <a href="../ImageMaps.html"
  22.         accesskey="t"><img alt="top" src="../../images/up.gif" /></a> <a
  23.         href="using_clientside_image_maps.html" accesskey="n"><img alt="next"
  24.         src="../../images/right.gif" /></a></p>
  25.       </td>
  26.     </tr>
  27.   </tbody>
  28. </table>
  29.  
  30. <div id="page_body">
  31. <h1>Creating client-side image maps</h1>
  32.  
  33. <p>Amaya enables you to use client-side image maps that link an image to one
  34. or multiple URIs.</p>
  35.  
  36. <p class="ProcedureCaption">To create a new image map</p>
  37. <ol>
  38.   <li>Insert an image into the document by choosing <strong>Image</strong>
  39.     from the <strong>Types</strong> menu. 
  40.     <p></p>
  41.     <p class="ProcedureNote"><strong>Note:</strong>    You can
  42.     also insert an image by clicking the <img src="../../images/Image.gif"
  43.     alt="Image Button" /> icon on the toolbar, or directly from the keyboard
  44.     by pressing <code>Control + t</code> in Windows or <code>Control +
  45.     i</code> in Unix.</p>
  46.     <p></p>
  47.   </li>
  48.   <li>Select <strong>Area</strong> from the <strong>Types</strong> menu. Then
  49.     choose <strong>Circle</strong>, <strong>Polygon</strong>, or
  50.     <strong>Rectangle</strong>, depending on the shape of the area within the
  51.     image that you want to create. The following table indicates how to
  52.     define an area depending on the shape you select. 
  53.     <p class="ProcedureStep"
  54.     style="margin-left:.75in;text-indent:0in;"> </p>
  55.     <p class="TableTitle" style="margin-left:0in"><strong>Table 1: Defining
  56.     shapes</strong></p>
  57.  
  58.     <table border="1" cellspacing="0" cellpadding="0"
  59.     style="margin-left:0in;  border-collapse:collapse;border:none;">
  60.       <tbody>
  61.         <tr>
  62.           <td width="147" valign="top"
  63.           style="width:110.0pt;border-top:solid 1.5pt;                border-left:none;border-bottom:solid 1.5pt;             border-right:solid .5pt;                padding:0in 5.4pt 0in 5.4pt"><p
  64.             class="TableTitle"><strong>Shape</strong></p>
  65.           </td>
  66.           <td width="257" valign="top"
  67.           style="width:192.4pt;border-top:solid 1.5pt;             border-left:none;border-bottom:solid 1.5pt;             border-right:none;padding:0in 5.4pt 0in 5.4pt"><p
  68.             class="TableTitle"><strong>Defining the Area</strong></p>
  69.           </td>
  70.         </tr>
  71.         <tr>
  72.           <td width="147" valign="top"
  73.           style="width:110.0pt;border-top:none;border-left: none;             border-bottom:solid .5pt;border-right:             solid .5pt;padding:0in 5.4pt 0in 5.4pt"><p
  74.             class="TableText">Circle</p>
  75.           </td>
  76.           <td valign="top"
  77.           style="width:192.4pt;border:none;border-bottom:solid .5pt;   padding:0in 5.4pt 0in 5.4pt"><p
  78.             class="TableText">Click the left mouse button to select the
  79.             position of one corner of the circle. Hold down the button, move
  80.             your cursor to the opposite corner, then release the button.</p>
  81.             <p></p>
  82.           </td>
  83.         </tr>
  84.         <tr>
  85.           <td width="147" valign="top"
  86.           style="width:110.0pt;border-top:none;border-left:   none;border-bottom:solid .5pt;border-right:solid .5pt;padding:0in 5.4pt 0in 5.4pt"><p
  87.             class="TableText">Polygon</p>
  88.           </td>
  89.           <td width="257" valign="top"
  90.           style="width:192.4pt;border:none;border-bottom:solid .5pt;   padding:0in 5.4pt 0in 5.4pt"><p
  91.             class="TableText">Click the left mouse button at each point that
  92.             you want to be a corner of the polygon. Right-click to indicate
  93.             when you have reached the last point.</p>
  94.             <p></p>
  95.           </td>
  96.         </tr>
  97.         <tr style="height:63.4pt">
  98.           <td width="147" valign="top"
  99.           style="width:110.0pt;border-top:none;border-left:   none;border-bottom:solid 1.5pt;border-right:solid .5pt;padding:0in 5.4pt 0in 5.4pt;   height:63.4pt"><p
  100.             class="TableText">Rectangle</p>
  101.           </td>
  102.           <td width="257" valign="top"
  103.           style="width:192.4pt;border:none;border-bottom:solid 1.5pt;   padding:0in 5.4pt 0in 5.4pt;height:63.4pt"><p
  104.             class="TableText">Click the left mouse button to select the
  105.             position of one corner of the circle. Hold down the button, move
  106.             your cursor to the opposite corner, then release the button.</p>
  107.           </td>
  108.         </tr>
  109.         <tr>
  110.           <td></td>
  111.           <td></td>
  112.         </tr>
  113.       </tbody>
  114.     </table>
  115.   </li>
  116.   <li>When you finish defining the area of the image map, a dialog will
  117.     display so you can enter the Alternate Text. Alternate text is required
  118.     for any graphic or image map. 
  119.     <p></p>
  120.   </li>
  121.   <li>Click anywhere within the image map area. Another dialog displays so
  122.     you can input the URI or target to which you want to link the image.
  123.     Enter the target of the link associated with the defined area, or
  124.     <strong>Browse</strong> for the link. 
  125.     <p></p>
  126.     <p><b>Tip:</b>     To see an outline of each existing
  127.     area in the image map, select <strong>Show map areas</strong> from the
  128.     <strong>Views</strong> menu.</p>
  129.   </li>
  130. </ol>
  131. </div>
  132. </body>
  133. </html>
  134.